<template>
  <div>
    <!-- :inline="true" 表单一行显示 -->
    <el-form ref="searchForm" :inline="true" style="margin-top: 20px">
      <!-- 重置会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效 -->
      <el-form-item>
        <el-input
          v-model="searchMap.cardNum"
          placeholder="会员卡号"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchMap.name"
          placeholder="会员名字"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchMap.payType"
          placeholder="支付类型"
          style="width: 110px"
        >
          <!-- 不要忘记 payTypeOptions 绑定到data中 -->
          <el-option
            v-for="option in payTypeOptions"
            :key="option.type"
            :label="option.name"
            :value="option.type"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- value-format 是指定绑定值的格式 -->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd"
          v-model="searchMap.birthday"
          type="date"
          placeholder="出生日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border stripe style="width: 100%">
      <el-table-column prop="cardNum" label="卡号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="birthday" label="生日" :formatter="dateFormat">
      </el-table-column>

      <el-table-column prop="phone" label="手机号码"> </el-table-column>
      <el-table-column prop="integral" label="积分" width="100">
      </el-table-column>
      <el-table-column prop="money" label="金额" width="100"> </el-table-column>
      <el-table-column prop="payType" label="支付类型" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payType == 1" type="success">现金</el-tag>
          <el-tag v-if="scope.row.payType == 2" type="info">微信</el-tag>
          <el-tag v-if="scope.row.payType == 3" type="warning">支付宝</el-tag>
          <el-tag v-if="scope.row.payType == 4" type="danger">银行卡</el-tag>
        </template></el-table-column
      >
      <el-table-column prop="address" label="住址"> </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 显示分页   layout="total, sizes, prev, pager, next, jumper"-->
    <el-pagination
      class="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 5, 10, 20, 50, 100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <app-add
      :dialogVisible="dialogVisible"
      :payTypeOptions="payTypeOptions"
      :pojo="pojo"
      :closeDialog="closeDialog"
    ></app-add>
  </div>
</template>

<script>
import memberApi from "@/api/member";
import AppAdd from "./AppAdd";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,

      searchMap: {},

      list: [],
      total: 0,

      payTypeOptions: [
        { type: "1", name: "现金" },
        { type: "2", name: "微信" },
        { type: "3", name: "支付宝" },
        { type: "4", name: "银行卡" },
      ],

      dialogVisible: false,
      pojo: {},
    };
  },

  components: { AppAdd },

  created() {
    this.fetchData();
  },

  methods: {
    dateFormat(row, column) {
      let data = row[column.property];
      if (data === null) {
        return "";
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },

    async fetchData() {
      const { data } = await memberApi.search(
        this.currentPage,
        this.pageSize,
        this.searchMap
      );
      this.list = data.rows;
      this.total = data.total;
    },

    // 每页显示条数改变调用方法
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fetchData();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },

    search() {
      this.currentPage = 1;
      this.fetchData();
    },

    resetForm() {
      this.searchMap = {};
    },

    handleAdd() {
      this.dialogVisible = true;
    },

    async handleEdit(id) {
      var resp = await memberApi.getById(id);
      this.pojo = resp.data;
      this.dialogVisible = true;
    },

    closeDialog() {
      this.fetchData();
      this.pojo = {};
      this.dialogVisible = false;
    },

    handleDelete(id) {
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        // 确认
        memberApi.deleteById(id).then((resp) => {
          this.$message({
            message: resp.message,
            type: "success",
          });
          // 删除成功，刷新列表数据
          this.fetchData();
        });
      });
    },
  },
};
</script>

<style scoped>
.fenye {
  position: fixed;
  bottom: 0px;
  left: 40%;
}
</style>